<template>
    <n-layout embedded content-style="padding: 24px;">
    <n-card>
        <n-collapse accordion>
            <template #header-extra>
            <n-icon><CashIcon /></n-icon>
            </template>
            <template #arrow>
            <n-icon>
                <CashIcon />
            </n-icon>
            </template>
            <n-collapse-item v-for:="mc in markerCodes" :title="mc.groupName" :name="mc.groupName">
                <n-flex  justify="space-between">
                    <ImgCard v-for:="m in mc.codes" :key="m.code"  :markerCode="m" @componentClick="handleComponentClick"></ImgCard>
                </n-flex >   
            </n-collapse-item>
        </n-collapse>
    </n-card>
  </n-layout>
</template>
<script>
import mcs from '@/scenario/marker/MarkerCode';
import { CashOutline as CashIcon } from '@vicons/ionicons5';
import { NButton, NCard,NCollapse,NCollapseItem,NFlex,NIcon,NLayout } from 'naive-ui';
import { getCurrentInstance, onMounted,ref } from 'vue'
import { useStore } from 'vuex';
import ImgCard from '@/components/ImgCard.vue';
export default {
    components: {
        NCard,NButton,NLayout,CashIcon,NCollapse,NCollapseItem,NFlex,NIcon
        ,ImgCard
    },
    props: {
        modal: {
            type: Object
        }
    },
    setup() {
        const { proxy } = getCurrentInstance();

        // let curv = useStore().state.curViewer;
        // console.log(curv);
        const sd = useStore().state.scenarioDeduce;

        // 点击事件处理
        const handleComponentClick = (payload) => {
            // console.log('被点击的组件数据：', payload),由于NavenUI的特性，不能在弹出框时操作
            // closeModal();
            //当前想定中获得标绘管理对象
            const curScenario = sd.getCurScenario();
            const markerManager = curScenario.getMarkerManager();
            markerManager.createMarker(payload,undefined,marker =>{
                if (!marker) {
                    console.log("不存在的标绘！");
                }else{
                    marker.setMarkerName("测试的标绘");
                }
             
            })
        }
        let markerCodes =ref(mcs);
      
        

        //关闭父组件中的modal，需要事件提交到父组件
        const closeModal = () => {
            proxy.modal.destroy();
        }
        return {
            markerCodes,
            closeModal,handleComponentClick
        }
    },
}
</script>